<head>
  <meta content="text/html; charset=utf-8" http-equiv="content-type" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TestReport</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <style>
    body {
      background-color: #f2f2f2;
      color: #333;
      margin: 0 auto;
      width: 960px;
    }
    #summary, #details {
      width: 960px;
    }
    #summary th {
      background-color: skyblue;
      padding: 5px 12px;
    }
    #summary td {
      background-color: lightblue;
      text-align: center;
      padding: 4px 8px;
    }
    #details th {
      background-color: skyblue;
      padding: 5px 12px;
    }
    #details td {
      background-color: lightblue;
      padding: 5px 12px;
    }
    #details .detail {
      background-color: lightgrey;
      font-size: smaller;
      padding: 5px 10px;
      text-align: center;
    }
    #details .success {
      background-color: greenyellow;
    }
    #details .error {
      background-color: red;
    }
    #details .failure {
      background-color: salmon;
    }
    #details .skipped {
      background-color: gray;
    }

    .button {
      font-size: 1em;
      padding: 6px;
      width: 4em;
      text-align: center;
      background-color: #06d85f;
      border-radius: 20px/50px;
      cursor: pointer;
      transition: all 0.3s ease-out;
    }
    a.button{
      color: gray;
      text-decoration: none;
    }
    .button:hover {
      background: #2cffbd;
    }

    .overlay {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.7);
      transition: opacity 500ms;
      visibility: hidden;
      opacity: 0;
    }
    .overlay:target {
      visibility: visible;
      opacity: 1;
    }

    .popup {
      margin: 70px auto;
      padding: 20px;
      background: #fff;
      border-radius: 5px;
      width: 30%;
      position: relative;
      transition: all 5s ease-in-out;
    }

    .popup h2 {
      margin-top: 0;
      color: #333;
      font-family: Tahoma, Arial, sans-serif;
    }
    .popup .close {
      position: absolute;
      top: 20px;
      right: 30px;
      transition: all 200ms;
      font-size: 30px;
      font-weight: bold;
      text-decoration: none;
      color: #333;
    }
    .popup .close:hover {
      color: #06d85f;
    }
    .popup .content {
      max-height: 30%;
      overflow: auto;
      text-align: left;
    }

    @media screen and (max-width: 700px) {
      .box {
        width: 70%;
      }
      .popup {
        width: 70%;
      }
    }

  </style>
</head>
<body>
  <h1>Test Report: {{html_report_name}}</h1>

  <h3>执行情况</h3>
  <div id="container" style="height: 50%;padding-top: 20px"></div>

  <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};

    var option;
    option = {
        title: {
            text: '测试执行情况饼图',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '次数',
                type: 'pie',
                radius: '50%',
                data: [
                    {value: {{successes}}, name: '成功'},
                    {value: {{failures}}, name: '失败'},
                    {value: {{skipped}}, name: '跳过'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

  </script>

  <h3>接口响应时间</h3>
  <div id="container_bar" style="height: 50%;width:100%;padding-top: 20px"></div>

  <script type="text/javascript">
    var dom = document.getElementById("container_bar");
    var myChart = echarts.init(dom);
    var app = {};

    var option;

    option = {
       tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            data: {{apiNameList}},
            axisLabel: {
              interval: 0,
              rotate:"30",
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: {{apiTimeList}},
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            }
        }]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }


  </script>


  <h3>Details</h3>
  <table id="details">
    <tr>
      <th>Url Name</th>
      <th>Url Method</th>
      <th>Status</th>
      <th>Response Time</th>
      <th>Detail</th>
    </tr>
    {% for record in records %}
      <tr>
        <th class="{{record.name}}" style="width:5em;"><a href={{record[0]}} style="font-size: 10px">{{record[0]}}</a></td>
        <td style="text-align:center;width:6em;">{{record[2]}}</td>
        <td style="text-align:center;width:6em;">{{record[3]}}</td>
        <td style="text-align:center;width:10em;">{{ '%0.1f'| format(record[5]|float) }} ms</td>
        <td class="detail">
            <a class="button" href="#popup_log_{{loop.index}}">data</a>
            <div id="popup_log_{{loop.index}}" class="overlay">
              <div class="popup">
                <h2>期望数据</h2>
                <a class="close" href="#">&times;</a>
                <div class="content"><pre>{{ record[6] | safe }}</pre></div>
                <h2>实际数据</h2>
                <div class="content"><pre>{{ record[7] | safe }}</pre></div>
                <h2>对比结果</h2>
                <div class="content"><pre color="red">{{ record[8] | safe }}</pre></div>
              </div>
            </div>
        </td>
      </tr>
    {% endfor %}
  </table>

</body>